<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <table width="80%" height="300px" border="1px" cellspacing="0" align="center">
            <tr align="center" style="background-color: #D8D8D8;">
                <th>&nbsp;</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(book, index) in books" align="center">
                <td>{{index + 1}}</td>
                <td>{{book.name}}</td>
                <td>{{book.publish_date}}</td>
                <td>￥{{book.price}}</td>
                <td>
                    <button @click="sub(index)" :disabled="book.num === 1">-</button>
                    <span>{{book.num}}</span>
                    <button @click="add(index)">+</button>
                </td>
                <td>
                    <button @click="deleteItem(index)">移除</button>
                </td>
            </tr>
        </table>
        <div style="font-size:20px;font-weight:bold;margin-left: 140px;">总价格:{{total_price}}</span></div>
        <!-- <button @click="totalPrice">计算价格</button> -->
    </div>
</body>
<script>
    var app = new Vue({
        el : "#app",
        data : {
            books : [
                {
                    name:"《java编程思想》",
                    publish_date:"2020/09",
                    price:98,
                    num:1,
                },
                {
                    name:"《数据分析与数据原理》",
                    publish_date:"2019/02",
                    price:39,
                    num:1,
                },
                {
                    name:"《Hadoop权威指南》",
                    publish_date:"2019/10",
                    price:59,
                    num:1,
                },
                {
                    name:"《代码大全》",
                    publish_date:"2018/08",
                    price:128,
                    num:1,
                },
            ],
            total_price : 0,
        },
        methods : {
            add : function(index){
                this.books[index]["num"] += 1;
                // this.totalPrice();
            },
            sub : function(index){
                this.books[index]["num"] -= 1;
                this.totalPrice();
            },
            deleteItem : function(index){
                this.books.splice(index, 1);
                this.totalPrice();
            },
            totalPrice : function(){
                var len = this.books.length;
                var total = 0;
                for (var i = 0;i < len;i++) {
                    total += this.books[i]["num"] * this.books[i]["price"];
                }
                this.total_price = total;
            },
        },
        created(){
            this.totalPrice();
        },
        updated(){
            this.totalPrice();
        }
    });
</script>
</html>